var images = {}; 

// Add in prepareCanvas Function 

loadImage("leftArm");

loadImage("legs");

loadImage("torso"); 

loadImage("rightArm");

loadImage("head"); 

loadImage("hair"); 

loadImage("leftArm-jump"); 

loadImage("legs-jump"); 

loadImage("rightArm-jump");

//resource loaded
var totalResources = 9; 

var numResourcesLoaded = 0; 

var fps = 30; 

//redraw
var charX = 245; 

var charY = 185;

var breathInc = 0.1; 

var breathDir = 1; 

var breathAmt = 0; 

var breathMax = 2; 

var breathInterval = setInterval(updateBreath, 1000 / fps);

var maxEyeHeight = 14; 

var curEyeHeight = maxEyeHeight; 

var eyeOpenTime = 0; 

var timeBtwBlinks = 4000; 

var blinkUpdateTime = 200; 

var blinkTimer = setInterval(updateBlink, blinkUpdateTime);

var jumping = false;



function prepareCanvas(canvasDiv, canvasWidth, canvasHeight) { 

// Create the canvas (Neccessary for IE because it doesn't know what a canvas element is) 

canvas = document.createElement('canvas'); 

canvas.setAttribute('width', canvasWidth); 

canvas.setAttribute('height', canvasHeight); 

canvas.setAttribute('id', 'canvas'); 

canvasDiv.appendChild(canvas); 

if(typeof G_vmlCanvasManager != 'undefined') { 

canvas = G_vmlCanvasManager.initElement(canvas); 

} 

context = document.getElementById('canvas').getContext("2d"); 

//loadImage here 

}

function loadImage(name) 

{ 

images[name] = new Image(); 

images[name].onload = function() { 

resourceLoaded(); 

} 

images[name].src = "images/" + name + ".png"; 

}

function resourceLoaded() 

{ 

numResourcesLoaded += 1; 

if(numResourcesLoaded === totalResources) { 

setInterval(redraw, 1000 / fps); 

} 

} 

function redraw() { 

var x = charX; 

var y = charY; 

var jumpHeight = 45;

canvas.width = canvas.width; // clears the canvas 

// Draw shadow 

 if (jumping) { 

 drawEllipse(x + 40, y + 29, 100 - breathAmt, 4); 

 } else { 

 drawEllipse(x + 40, y + 29, 160 - breathAmt, 6); 

 } 

 if (jumping) { 

 y -= jumpHeight; 

 } 

 if (jumping) { 

 context.drawImage(images["leftArm-jump"], x + 40, y - 42 - breathAmt); 

 } else { 

 context.drawImage(images["leftArm"], x + 40, y - 42 - breathAmt); 

 }

if (jumping) { 

 context.drawImage(images["legs-jump"], x, y- 6); 

 } else { 

 context.drawImage(images["legs"], x, y); 

 }

context.drawImage(images["torso"], x, y - 50); 

context.drawImage(images["head"], x - 10, y - 125 - breathAmt); 

context.drawImage(images["hair"], x - 37, y - 138 - breathAmt); 

if (jumping) {

 context.drawImage(images["rightArm-jump"], x - 35, y - 42 - breathAmt); 

 } else { 

 context.drawImage(images["rightArm"], x - 15, y - 42 - breathAmt); 

 }

drawEllipse(x + 47, y - 68 - breathAmt, 8, curEyeHeight); 

drawEllipse(x + 58, y - 68 - breathAmt, 8, curEyeHeight);


}



function drawEllipse(centerX, centerY, width, height) { 

 context.beginPath(); 

 context.moveTo(centerX, centerY - height/2); 

 context.bezierCurveTo( 

 centerX + width/2, centerY - height/2, 

 centerX + width/2, centerY + height/2, 

 centerX, centerY + height/2 

 ); 

 context.bezierCurveTo( 

 centerX - width/2, 

 centerY + height/2, 

 centerX - width/2, 

 centerY - height/2, centerX, centerY - height/2 

 ); 

 context.fillStyle = "black"; 

 context.fill(); context.closePath(); 

}

function updateBreath() { 

 if (breathDir === 1) { // breath in 

 breathAmt -= breathInc; 

 if (breathAmt < -breathMax) { 

 breathDir = -1; 

 } 

 } else { // breath out 

 breathAmt += breathInc; 

 if(breathAmt > breathMax) { 

 breathDir = 1; 

 } 

 } 

}

function updateBlink() { 

 eyeOpenTime += blinkUpdateTime; 

 if(eyeOpenTime >= timeBtwBlinks){ 

 blink(); 

 } 

} 

function blink() { 

 curEyeHeight -= 1; 

 if (curEyeHeight <= 0) { 

 eyeOpenTime = 0; curEyeHeight = maxEyeHeight; 

 } else { 

 setTimeout(blink, 10); 

 } 

}

function jump() { 

 if (!jumping) { 

 jumping = true; 

 setTimeout(land, 500); 

 } 

}

function land() { 

 jumping = false; 

}
